<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">五子棋对战</div>
    <div class="container">
        <div>
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: 'user/userInfo',
            success: function (body) {
                let screendiv = document.querySelector('#screen');
                screendiv.innerHTML = '玩家: ' + body.username + '  分数: ' + body.score + '<br>' +
                    '比赛场数: ' + body.totalCount + '  获胜场数:' + body.winCount;
            },
            error: function () {
                alert("获取用户信息失败");
            }
        });

        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function () {
            console.log("onopen");
        };
        websocket.onclose = function () {
            console.log("onclose");
        };
        websocket.onerror = function () {
            console.log("onerror");
        };
        //页面关闭前手动调用websocket的close方法
        window.onbeforeunload = function () {
            websocket.close();
        }
        websocket.onmessage = function (e) {
            //首先解析返回的Json对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match-button');
            if (!resp.ok) {
                console.log("游戏大厅中接收到了失败响应" + resp.reason);
                if (resp.reason == "你尚未登录，不能进行后续匹配") {
                    alert("您尚未登录，不能进行匹配，请登录");
                    location.assign("./login.html");
                } else if (resp.reason == "您已经在别处登录了") {
                    alert("您已经在别处登录了");
                    location.assign("./login.html");
                }
                return;
            }
            if (resp.message == 'startMatch') {
                //开始匹配请求发送成功
                console.log("进入匹配队列");
                matchButton.innerHTML = '匹配中...(点击停止)';
            } else if (resp.message == 'stopMatch') {
                console.log("离开匹配队列");
                matchButton.innerHTML = '开始匹配';
            } else if (resp.message == 'matchSuccess') {
                //匹配已经匹配到对手
                console.log("匹配到对手");
                // location.assign("./game_room.html");
                location.replace("./game_room.html");
            } else {
                console.log("收到非法响应！ message=" + resp.message);
            }
        };

        //给匹配按钮添加点击事件
        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function () {
            //在触发websocket请求之前先确认websocket连接是否好着呢
            if (websocket.readyState == websocket.OPEN) {
                //这里发送数据可能是开始匹配也可能是停止匹配
                if (matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配");
                    websocket.send(JSON.stringify(
                        {
                            message: 'startMatch'
                        }
                    ));
                } else {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify(
                        {
                            message: 'stopMatch'
                        }
                    ));
                }

            } else {
                //连接异常
                alert("连接断开，请重新登录");
                location.replace('./login/html');
            }
        };
    </script>
</body>

</html>